<template>
	<view class="my-path-list">
		<view class="path-list">
			<view class="path-item" v-for="(item, index) in data.newData" :key="index"
				style="display: flex; justify-content: space-between;">
				<view @tap="toAddPath(item.id)">
					<view class="item-main">
						<view class="active" v-if="item.state == 1">默认</view>
						<view class="item-name">{{ item.name }}</view>
						<view>{{ item.phone }}</view>
					</view>
					<view class="item-main" style="display: block;">
						<view>{{ item.city }}</view>
						<view>{{ item.detail }}</view>
					</view>
				</view>
				<view @tap="dialogToggle(item.id)">
					<uni-icons type="closeempty" size="20"></uni-icons>
				</view>
			</view>
		</view>

		<view class="add-path">
			<view class="add-path-btn" @tap="goAddPath">新增地址</view>
		</view>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="error" cancelText="关闭" confirmText="确认" title="是否确认删除!" @confirm="dialogConfirm"
				@close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs } from 'vue'
import { useHomeStore } from '../../store/counter'
import { onLoad } from "@dcloudio/uni-app"
import { addressListApi, addressDelApi } from '../../https/http'
const alertDialog = ref()
const mainStore = useHomeStore()
const data = reactive<{
	user: string | null
	newData: {
		city: string
		detail: string
		id: number
		name: string
		phone: string
		state: number
		username: string
	}[]
	d_id:number
}>({
	user: "",
	newData: [
	],
	d_id:0
})
onLoad(() => {
	try {
		const user = uni.getStorageSync('d_user');
		const token = uni.getStorageSync('d_token');
		const usern = uni.getStorageSync('d_usern');
		const avatar = uni.getStorageSync('d_avatar');
		if (user&&token&&usern&&avatar){
			data.user = usern
			newData()
		} else {
			uni.redirectTo({
				url:"/pages/login/login"
			})
		}
	} catch (error) {
		console.log(error);
	}
})
const newData = async () => {
	const res = await addressListApi((data.user as string))
	if (res.code == 200) {
		data.newData = res.data
	}
}
const goAddPath = () => {
	uni.navigateTo({
		url: "/pages/my-add-path/my-add-path"
	})
}
const dialogToggle = (id:any) => {
	if (id) {
		data.d_id = id
	} else {
		data.d_id = 0
	}
	alertDialog.value.open()
}
const dialogConfirm = () => {
	console.log('点击确认')
	if(data.d_id != 0){
		dele()
	}

}
const dele = async() => {
	const res = await addressDelApi((data.user as string), data.d_id)
	if (res.code == 200) {
		newData()
	}
}
const dialogClose = () => {
	newData()
}
const toAddPath = (id: number) => {
	uni.navigateTo({
		url: "../my-add-path/my-add-path?u_id=" + id
	})
}

</script>

<style scoped>
.path-item {
	padding-left: 20rpx;
}

.path-item {
	padding: 10rpx;
	border-bottom: 2rpx solid #CCCCCC;
}

.item-main {
	display: flex;
	align-items: center;
}

.item-name {
	padding-right: 10rpx;
}

.active {
	padding-right: 10rpx;
	padding-left: 0.3rem;
	background-color: #49BDFB;
	color: #FFFFFF;
	border-radius: 26rpx;
	font-size: 24rpx;
	text-align: center;
}

.add-path {
	padding: 20rpx 0;
	width: 100%;
	display: flex;
	justify-content: center;
}

.add-path-btn {
	border: 2rpx solid #49BDFB;
	color: #49BDFB;
	border-radius: 30rpx;
	padding: 6rpx 60rpx;
}
</style>
